<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .bBox{width: 120px;height: 120px;background: pink;}
      .box{width:100px;height:50px}
      .red{background: red;}
    </style>
	</head>
	<body>
    <div id="app">
      <div @click="box" class="box red">
        <button type="button" @click.stop="btn">按钮</button>
      </div>
      <div @click="parent" class="bBox">
        <div @click.self="box" class="box red">
          <button type="button" @click="btn">按钮</button>
        </div>
      </div>
      <input type="text" @keydown="kd()" />
      <input type="text" @keydown.enter="kd()" />
      <input type="text" @keydown.a="kd()" />
      <input type="text" @keydown.ctrl="kd()" />
      <input type="text" @keydown.ctrl.a="kd()" />
      <input type="text" v-model.trim="t" @keyup="ku" />
      <input type="text" v-model.lazy="t2" /><span>{{t2}}</span>
      <input type="number" v-model.number="n" /><span>{{typeof n}}-{{n}}</span>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    // 自定义了键盘的修饰符
    Vue.config.keyCodes.a = 65;
    
    var vm = new Vue({
      el:"#app",
      data:{
        msg:2,
        t:"",
        t2:"",
        n:""
      },
      methods:{
        box(){
          console.log("点击了box");
        },
        btn(){
          console.log("点击了btn")
        },
        parent(){
          console.log("点击了parent")
        },
        kd(){
          console.log(1)
        },
        ku(){
          console.log(this.t.length)
        }
      }
    })
    
  </script>
</html>
